<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				overflow: hidden;
			}
			.container{
				width: 100%;
				height: 100vh;
				background-color: skyblue;
				position: relative;
			}
			.container .box{
				width: 1080px;
				height: 540px;
				background-color: antiquewhite;
				position: absolute;
				left: 50%;
				margin-left: -540px;
				top: 50%;
				margin-top: -270px;
			}
			.item{
				float: left;
				margin: 10px;
			}
			.item1{
				width: 250px;
				height: 520px;
				background-image: linear-gradient(to bottom,#fff,pink);
			}
			.itme2 , .itme3{
				width: 385px;
				height: 250px;
				background-image: linear-gradient(to bottom,pink,#fff);
			}
			
			.item4, .item5 , .item6{
				width: 250px;
				height: 250px;
				background-image: linear-gradient(to bottom, #fff , pink);
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="item item1 animate__animated animate__backInDown"></div>
				<div class="item itme2 animate__animated animate__backInLeft"></div>
				<div class="item itme3 animate__animated animate__backInRight"></div>
				<div class="item item4 animate__animated animate__backInUp"></div>
				<div class="item item5 animate__animated animate__bounceIn"></div>
				<div class="item item6 animate__animated animate__fadeInDown"></div>
			</div>
		</div>
	</body>
</html>
